<template>
  <el-select v-model="productSpecificationsIdArr" multiple placeholder="请选择您的规格" style="width: 500px;" @change="updateProductSpecifications">
    <el-option
      v-for="item in allProductSpecificationsArr"
      :key="item.id"
      :label="item.name+'('+item.type.name+')'"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'ProductSpecificationsSelectBox',
  props:{
    callback:Function
  },
  data:function () {
    return {
      productSpecificationsIdArr:[],
      allProductSpecificationsArr:[],
    }
  },
  mounted () {
    this.getAllProductSpecificationsArr()
  },
  methods:{
    setSelectIds:function (productSpecificationsArr) {
      this.productSpecificationsIdArr=[]
      console.log('productSpecificationsArr',productSpecificationsArr)
      if (!productSpecificationsArr || !productSpecificationsArr.length){
        return
      }
      var idArr=[]
      productSpecificationsArr.forEach(function (value, index) {
        idArr.push(value.id)
      })
      this.productSpecificationsIdArr=idArr
      console.log('idArr',idArr)
      this.$forceUpdate()
    },
    updateProductSpecifications:function () {
      var arr=[]
      let $this=this
      // console.log('$this.productSpecificationsIdArr',$this.productSpecificationsIdArr)
      $this.allProductSpecificationsArr.forEach(function (value, index) {
        if ($this.productSpecificationsIdArr.indexOf(value.id)>-1){
          arr.push(value)
        }
      })
      $this.$props.callback(arr)
      // console.log('arr',arr)
    },
    getAllProductSpecificationsArr:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameSupplier+'SupplierProductSpecifications/getList',{},function (data) {
        $this.allProductSpecificationsArr=data.list
      })
    }
  }
}
</script>

<style scoped>

</style>
